<!--
 * @FileDescription: hr查看某员工详细信息表单
 * @Author: 叶永鸿、袁年政
 * @Date: 2021-7-17
 * @LastEditors: 叶永鸿
 * @LastEditTime: 2021-7-18
 -->
<template>
  <div>
    <el-page-header title="返回" icon="el-icon-arrow-left" @click="goBack">
    </el-page-header>
    <el-space direction="vertical">
      <!--基础信息卡片-->
      <el-card style="width: 1000px">
        <template #header>
          <span>个人信息</span>
        </template>
        <div>
          <el-descriptions class="margin-top" :column="3" :size="size" border>
            <el-descriptions-item>
              <template #label>
                <i class="el-icon-user"></i>
                姓名
              </template>
              {{ hrManageCheckInfor.realname }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <i class="el-icon-mobile-phone"></i>
                性别
              </template>
              {{ hrManageCheckInfor.gender }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <i class="el-icon-mobile-phone"></i>
                手机号
              </template>
              {{ hrManageCheckInfor.telephone }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <i class="el-icon-tickets"></i>
                职位
              </template>
              {{ hrManageCheckInforDetails.position }}
              <el-button
                icon="el-icon-edit"
                circle
                size="mini"
                @click="modifyPosition"
              ></el-button>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <i class="el-icon-tickets"></i>
                年薪（万）
              </template>
              {{ hrManageCheckInforDetails.salary }}
              <el-button
                icon="el-icon-edit"
                circle
                size="mini"
                @click="modifySalary"
              ></el-button>
            </el-descriptions-item>
          </el-descriptions>
          <el-divider></el-divider>
          <el-table :data="hrMangeCheckExperience" border style="width: 100%">
            <el-table-column type="expand">
              <template #default="props">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item label="评价">
                    <span>{{ props.row.evaluation }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column prop="companyname" label="公司名" width="250">
            </el-table-column>
            <el-table-column prop="recruited" label="入职时间" width="200">
            </el-table-column>
            <el-table-column prop="suspended" label="离职时间" width="180">
            </el-table-column>
            <el-table-column prop="position" label="职位" width="180">
            </el-table-column>
            <el-table-column prop="salary" label="年薪" width="100">
            </el-table-column>
          </el-table>
          <el-divider></el-divider>
          <!--绩效-->
          <span>员工绩效</span>
          <div class="btn_">
            <el-button size="small" type="text" v-if="isAdd" @click="add_per"
              >添加</el-button
            >
            <el-button
              size="small"
              type="text"
              v-if="isSave"
              @click="cancel_per"
              >取消</el-button
            >
            <el-button
              size="small"
              type="text"
              v-if="isSave"
              @click="submit_per"
              >保存</el-button
            >
          </div>
          <el-table
            :data="performanceData"
            :default-sort="{ prop: 'start', order: 'descending' }"
            v-if="isAdd"
          >
            <el-table-column type="expand">
              <template #default="props">
                <el-form>
                  <el-form-item label="详细记录：">
                    {{ props.row.text }}
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column
              prop="start"
              label="开始时间"
              width="125"
              sortable=""
            ></el-table-column>
            <el-table-column
              prop="end"
              label="结束时间"
              width="125"
            ></el-table-column>
            <el-table-column
              prop="rank"
              label="评分"
              width="50"
            ></el-table-column>
            <el-table-column prop="title" label="  绩效大纲"></el-table-column>
            <el-table-column fixed="right" width="160">
              <template #default="scope">
                <el-button size="mini" @click="handleEdit(scope.row)">
                  修改</el-button
                >
                <el-button
                  size="mini"
                  @click="handleDelete(scope.row)"
                  type="danger"
                >
                  删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-form v-if="isSave">
            <el-form-item label="开始时间-结束时间">
              <el-col :span="10">
                <el-date-picker
                  type="date"
                  placeholder="选择开始日期"
                  style="width: 60%"
                  format="YYYY 年 MM 月 DD 日"
                  value-format="YYYY-MM-DD"
                  @change="forceUpdate($event)"
                  v-model="perForm.start_time"
                ></el-date-picker>
              </el-col>
              <el-col :span="10">
                <el-date-picker
                  type="date"
                  placeholder="选择结束日期"
                  style="width: 60%"
                  format="YYYY 年 MM 月 DD 日"
                  value-format="YYYY-MM-DD"
                  @change="forceUpdate($event)"
                  v-model="perForm.end_time"
                ></el-date-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="绩效概述">
              <el-col :span="18" :offset="3">
                <el-input
                  v-model="perForm.title"
                  maxlength="20"
                  show-word-limit
                  @input="forceUpdate($event)"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="绩效详细">
              <el-col :span="20" :offset="2">
                <el-input
                  type="textarea"
                  v-model="perForm.text"
                  @input="forceUpdate($event)"
                  :autosize="{ minRows: 4, maxRows: 10 }"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="绩效评分">
              <el-col :span="20" :offset="2"
                ><!---->
                <el-rate
                  v-model="perForm.rank"
                  :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                >
                </el-rate>
              </el-col>
            </el-form-item>
          </el-form>
          <!--弹窗-->
          <el-dialog title="修改绩效" v-model="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="绩效概述">
                <el-input v-model="editData.title"></el-input>
              </el-form-item>
              <el-form-item label="绩效详细">
                <el-input
                  v-model="editData.text"
                  type="textarea"
                  :autosize="{ minRow: 3, maxRows: 8 }"
                ></el-input>
              </el-form-item>
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false"
                  >取消修改</el-button
                >
                <el-button type="primary" @click="handleSubmit()"
                  >保存修改</el-button
                >
              </span>
            </template>
          </el-dialog>
        </div>
      </el-card>
      <el-card style="width: 1000px" v-if="isLeave">
        <template #header>
          <span>该员工记录</span>
          <div style="text-align: right">
            <el-button
              class="button"
              type="text"
              @click="saveEvaluationAndLeave"
              >员工离职，保存评价</el-button
            >
          </div>
        </template>
        <el-input
          type="textarea"
          :autosize="{ minRows: 4, maxRows: 15 }"
          v-model="mangeEvaluation"
          @input="forceUpdate"
        >
        </el-input>
      </el-card>
    </el-space>
  </div>
</template>


<script>
export default {
  name: "manageInfor",

  data() {
    return {
      dialogFormVisible: false,
      isAdd: true,
      isSave: false,

      mangeEvaluation: this.$store.state.HrEvaluation,
      hrManageCheckInfor: this.$store.state.hrManageCheck.hrManageCheckInfor, //保存获得的信息
      hrManageCheckInforDetails:
        this.$store.state.hrManageCheck.hrManageCheckInforDetails,
      hrMangeCheckExperience:
        this.$store.state.hrManageCheck.hrMangeCheckExperience,
      isLeave: this.$route.query.isLeave,

      performanceData: this.$store.state.empPerformanceForHr.performances,
      empExpid: this.$store.state.empPerformanceForHr.empExpid,

      iconClasses: ["icon-rate-face-1", "icon-rate-face-2", "icon-rate-face-3"],

      perForm: {
        start_time: "",
        end_time: "",
        title: "",
        text: "",
        rank: 0,
      },
      editData: {
        text: "",
        title: "",
        perid: "",
      },
    };
  },

  methods: {
    reloadMangeInfor() {
      //重新加载当前页面的数据，实现修改后的store的更新以及当前页面表单的更新。
      //console.log("reload!")
      //console.log(this.$route.query.telEmp);
      var that = this;
      console.log(this.$route.query.telEmp);
      this.$axios
        .get("http://47.100.167.206:8082/Manage/manageexp", {
          params: {
            tel: this.$route.query.telEmp,
          },
          headers: { token: this.$store.state.loginInfor.token },
        })
        .then(
          function (response) {
            //console.log(that.hrManageCheckInfor);
            //console.log(response.data.data);

            var these = response.data.data; //暂时存储用户的信息。
            that.$axios
              .get("http://47.100.167.206:8082/Query/searchone", {
                params: { tel: that.$route.query.telEmp },
                headers: { token: that.$store.state.loginInfor.token },
              })
              .then(
                function (response) {
                  console.log(response);
                  that.$store.commit("hrManageCheck", {
                    hrManageCheckInfor: that.hrManageCheckInfor, //保存获得的信息
                    hrManageCheckInforDetails: these,
                    hrMangeCheckExperience: response.data.data,
                  });
                },
                function (err) {
                  console.log(err);
                  that.$message({
                    type: "error",
                    message: "网络请求失败，请重新登录",
                  });
                }
              );
          },
          function (err) {
            that.$message({
              type: "error",
              message: "网络请求失败，请重新登录",
            });
          }
        );
    },
    forceUpdate() {
      this.$forceUpdate();
    },
    // saveEvaluation() {
    //   this.$axios.get();
    // },
    goBack() {
      this.$router.go(-1);
    },
    modifyPosition() {
      //为员工修改职位
      var that = this;
      this.$prompt("请输入新的职位", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          console.log("触发");
          that.$axios
            .get("http://47.100.167.206:8082/Modify/setPosition", {
              params: {
                tel: that.hrManageCheckInfor.telephone,
                position: value,
              },
              headers: {
                token: this.$store.state.loginInfor.token,
              },
            })
            .then(
              function (response) {
                console.log(response);
                if (response.data.message == "successset") {
                  console.log(response);
                  that.hrManageCheckInforDetails.position = value;
                  console.log(
                    that.$store.state.hrManageCheck.hrManageCheckInforDetails
                  );
                  that.reloadMangeInfor();
                  console.log(that.hrManageCheckInforDetails);
                  console.log(
                    that.$store.state.hrManageCheck.hrManageCheckInforDetails
                  );
                  that.$message({
                    type: "success",
                    message: "成功修改职位 ",
                  });
                }
              },
              function (err) {
                console.log(err);
                that.$message({
                  type: "error",
                  message: "网络请求失败，请重新登录",
                });
              }
            );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消修改",
          });
        });
    },
    modifySalary() {
      //为员工修改薪资
      var that = this;
      this.$prompt("请输入新的薪资", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          console.log("触发");
          that.$axios
            .get("http://47.100.167.206:8082/Modify/setSalary", {
              params: {
                tel: that.hrManageCheckInfor.telephone,
                salary: value,
              },
              headers: {
                token: this.$store.state.loginInfor.token,
              },
            })
            .then(
              function (response) {
                if (response.data.message == "successset") {
                  console.log(response);
                  that.hrManageCheckInforDetails.salary = value;
                  that.reloadMangeInfor();
                  that.$message({
                    type: "success",
                    message: "成功修改薪资 ",
                  });
                }
              },
              function (err) {
                console.log(err);
                that.$message({
                  type: "error",
                  message: "网络请求失败，请重新登录",
                });
              }
            );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消修改",
          });
        });
    },
    saveEvaluationAndLeave() {
      //为员工提交评价并为员工进行离职操作
      var that = this;

      that.$axios
        .get("http://47.100.167.206:8082/Modify/suspend", {
          //先提交评价，再进行离职
          params: {
            tel: that.$route.query.telEmp,
            evaluation: that.mangeEvaluation,
          },
          headers: { token: that.$store.state.loginInfor.token },
        })
        .then(
          function (response) {
            console.log(response);
            if (response.data.message == "successsuspend") {
              that.$message({
                type: "success",
                message: "操作成功",
              });
            } else {
              that.$message({
                type: "error",
                message: "操作失败，请重试",
              });
            }
          },
          function (err) {
            that.$message({
              type: "error",
              message: "网络请求失败，请重新登录",
            });
          }
        );
    },
    add_per: function () {
      //添加绩效的打开按钮
      this.isAdd = false;
      this.isSave = true;
    },
    cancel_per: function () {
      //添加绩效，取消添加
      this.isSave = false;
      this.isAdd = true;
    },
    submit_per: function () {
      //添加绩效，确认添加
      var that = this;
      this.$axios
        .get("http://47.100.167.206:8082/Manage/writePerformance", {
          params: {
            expid: this.empExpid,
            rank: this.perForm.rank,
            text: this.perForm.text,
            title: this.perForm.title,
            start: this.perForm.start_time,
            end: this.perForm.end_time,
          },
          headers: {
            token: this.$store.state.loginInfor.token,
          },
        })
        .then(
          function (response) {
            console.log(response);
            if (response.data.message == "success writedown") {
              that.reloadPerformance();
              that.$message({
                type: "success",
                message: "添加成功",
              });
            } else {
              that.$message({
                type: "error",
                message: "未知错误，请重新登录",
              });
            }
          },
          function (err) {
            console.log(err);
            that.$message({
              type: "error",
              message: "操作失败，请重新登录",
            });
          }
        );
      this.isSave = false;
      this.isAdd = true;
    },

    handleEdit: function (row) {
      //修改绩效的打开按钮
      this.editData.text = row.text;
      this.editData.title = row.title;
      this.editData.perid = row.perid;
      this.dialogFormVisible = true;
    },

    handleDelete: function (row) {
      //删除绩效
      var that = this;
      this.$axios
        .get("http://47.100.167.206:8082/Manage/deletePerformance", {
          params: {
            perid: row.perid,
          },
          headers: { token: this.$store.state.loginInfor.token },
        })
        .then(
          function (response) {
            console.log(response);
            if (response.data.message == "success deleting") {
              that.reloadPerformance();
              that.$message({
                type: "success",
                message: "操作成功",
              });
            } else {
              that.$message({
                type: "error",
                message: "操作失败，请重新登录",
              });
            }
          },
          function (err) {
            that.$message({
              type: "error",
              message: "网络请求失败，请重新登录",
            });
          }
        );
    },

    handleSubmit: function () {
      //修改绩效确认
      var that = this;
      this.$axios
        .get("http://47.100.167.206:8082/Manage/modifyPerformance", {
          params: {
            perid: this.editData.perid,
            text: this.editData.text,
            title: this.editData.title,
          },
          headers: { token: this.$store.state.loginInfor.token },
        })
        .then(
          function (response) {
            console.log(response);
            if (response.data.message == "success modifying") {
              that.$message({
                type: "success",
                message: "操作成功",
              });
              that.reloadPerformance();
              (that.editData = {
                text: "",
                title: "",
                perid: "",
              }),
                (that.dialogFormVisible = false);
            } else {
              that.$message({
                type: "error",
                message: "未知错误，请重新登录",
              });
            }
          },
          function (err) {
            console.log(err);
            that.$message({
              type: "error",
              message: "操作失败，请重新登录",
            });
          }
        );
    },

    reloadPerformance: function () {
      var that = this;
      that.$axios
        .get("http://47.100.167.206:8082/Query/hrqueryPerformance", {
          params: { expid: that.empExpid },
          headers: {
            token: that.$store.getters.getUserInfor.token,
          },
        })
        .then(
          function (response) {
            console.log(response);
            if (response.data.message == "successquery") {
              that.$store.commit("PerformanceForHr", {
                performances: response.data.data,
                empExpid: that.empExpid,
              });
              that.performanceData = response.data.data;
            }
          },
          function (err) {
            console.log(err);
          }
        );
    },
  },
};
</script>

<style scoped>
.add_form_manage {
  width: 50%;
  margin: 0 auto;
}
.btn_ {
  text-align: right;
}
</style>
